<template>
<component :is="component" :class="cls">
  <component :is="prefixComponent" :class="prefixClass" v-if="prefix">{{ prefix }}</component>
  <template v-if="isArray(value)">
    <template v-for="(item, idx) in value">
      <template v-if="!isNil(item)">
        <span v-if="idx" :class="separatorClass" v-html="separator" :key="idx"/>
        <component :is="valueComponent" :class="valCls" :key="idx">
          {{ format(item, isArray(type) ? type[idx] : type, isArray(params) ? params[idx] : params) }}
        </component>
      </template>
    </template>
  </template>
  <component v-else :is="valueComponent" :class="valCls" @click="$emit('click', $event)">
    {{ format(value, isArray(type) ? type[0] : type, params) }}
  </component>
  <component :is="suffixComponent" :class="suffixClass" v-if="suffix">{{ suffix }}</component>
</component>
</template>

<script setup lang="ts">
import { isArray, isNil } from 'lodash-es'
import { computed, PropType } from 'vue'
import { ComponentType, format, FormatType } from '../'
import { getEnum, getEnumByKey, getEnumByValue } from '../sys';


defineOptions({ name: 'Format' })

const props = defineProps({
  component: { type: [Object, String] as PropType<ComponentType>, default: 'span' },
  colour: { type: Boolean, default: true },
  params: { type: [String, Number, Object, Array] as PropType<any> },
  prefix: { type: String, default: null },
  prefixClass: { type: [String, Array] as PropType<string | string[]>, default: 'fi' },
  prefixComponent: { type: [Object, String] as PropType<ComponentType>, default: 'span' },
  separator: { type: String, default: '/' },
  separatorClass: { type: [String, Array] as PropType<string | string[]>, default: 'format-separator' },
  suffix: { type: String, default: null },
  suffixClass: { type: [String, Array] as PropType<string | string[]>, default: 'fi' },
  suffixComponent: { type: [Object, String] as PropType<ComponentType>, default: 'span' },
  type: { type: [String, Array] as PropType<FormatType | FormatType[]>, default: 'String' },
  value: { required: true },
  valueClass: { type: [String, Array] as PropType<string | string[]>, default: 'fi' },
  valueComponent: { type: [Object, String] as PropType<ComponentType>, default: 'span' },
})

const valCls = computed(() => {
  if (props.colour && props.type === 'Currency' && props.value as number < 0) {
    return `${props.valueClass} error`
  } else {
    return props.valueClass
  }
})

const cls = computed(() => {
  if (!props.colour) {
    return null
  } else if (props.type === 'Enum') {
    const e = getEnum(props.value, props.params);
    return e?.color ? 'bgc-' + e.color : null;
  } else if (props.type === 'EnumKey') {
    const e = getEnumByKey(props.value, props.params);
    return e?.color ? 'bgc-' + e.color : null;
  } else if (props.type === 'EnumValue') {
    const e = getEnumByValue(props.value, props.params);
    return e?.color ? 'bgc-' + e.color : null;
  } else {
    return null;
  }
})
</script>
